<!-- 准入信息 -->
<template>
  <div>
    <div class="header-box space-btn">
      <span class="header-btn" @click="onEdit">
        <span class="cus-text" pointer><a-icon type="edit" /></span>
        <span class="text">编辑</span>
      </span>
      <span class="header-btn ml-30">
        <span class="cus-text" pointer><a-icon type="copy" /></span>
        <a-popover title="更新日志" trigger="click">
          <template slot="content">
            <JournalInfo />
          </template>
          <span class="text">更新日志</span>
        </a-popover>
      </span>
    </div>
    <div v-if="isEdit" class="btn-box space-btn">
      <a-button type="primary" @click="onConfirm">确定</a-button>
      <a-button @click="onCancel">取消</a-button>
    </div>
    <div class="content-box">
      <a-card title="现场考察" :bordered="false">
        <!-- <SiteInspection /> -->
        <div v-if="isEdit">
          <a-form-model layout="inline">
            <a-row :gutter="24">
              <a-col :md="12" :sm="24">
                <a-form-model-item label="调查时间">
                  <a-range-picker
                    v-model="surveyTime"
                    format="YYYY-MM-DD"
                    style="width:100%;"
                    @change="(timeRange, timeStringRange) => setTimeRange('surveyTimeStart', 'surveyTimeEnd', timeRange, timeStringRange)"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item label="调查人员">
                  <ASelectList v-model="surveyPerson" :isHasDict="false" :defaultOption="surveyPersonOption" @change="surveyPersonChange" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <div class="mt-20">
            <div class="title">供应商调查表</div>
            <a-table
              size="small"
              bordered
              :columns="columns"
              :dataSource="[...dataSource, ...totalData]"
              :pagination="false"
              class="mt-10">
              <template slot="index" slot-scope="text, record, index">
                <span v-if="index < dataSource.length">{{ index + 1 }}</span>
                <span v-else>合计</span>
              </template>
              <template slot="score" slot-scope="text, record, index">
                <a-input-number v-if="index < dataSource.length" v-model="record.score" :min="0" :max="100" />
                <span v-else>{{ record.score }}</span>
              </template>
              <template slot="scoreInstruction" slot-scope="text, record, index">
                <a-textarea v-if="index < dataSource.length" v-model="record.scoreInstruction" placeholder="请输入" :rows="1" />
              </template>
            </a-table>
          </div>
          <div class="score-box mt-20">
            评分说明：合计为各项评分乘以权重比例的总和，仅支持总分合计为100分，则各项评分值需填入100以内。
          </div>
          <div class="mt-20">
            <div class="title">供应商调查表</div>
            <div class="mt-10">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :multiple="true"
                :file-list="fileList"
                @change="handleChange">
                <a-button icon="upload">上传附件</a-button>
                <span class="ml-10" style="color:#101010;">支持xlsx、PDF、PNG、JPG、PPT等格式文件，大小≤5M</span>
              </a-upload>
            </div>
          </div>
        </div>
        <div v-else class="detail-box">
          <div>
            <span class="title">调查时间</span>：<span>2024-06-01  至  2024-06-03</span>
            <span class="title ml-30">调查人员</span>：<span>李先生、杨先生、张小姐、王小姐</span>
          </div>
          <div class="mt-20">
            <span class="title">调查得分</span>：<span style="font-size: 20px;">82.5分</span>
            <a-table
              size="small"
              bordered
              :columns="columns"
              :dataSource="[...dataSource, ...totalData]"
              :pagination="false"
              class="mt-10">
              <template slot="index" slot-scope="text, record, index">
                <span v-if="index < dataSource.length">{{ index + 1 }}</span>
                <span v-else>合计</span>
              </template>
            </a-table>
          </div>
          <div class="mt-20">
            <span class="title">供应商调查表</span>
          </div>
          <div>
            <a-upload :file-list="fileList" disabled></a-upload>
          </div>
        </div>
      </a-card>
      <a-card title="样品认证" :bordered="false">
        <SampleCertification :isEdit="isEdit" />
      </a-card>
    </div>
  </div>
</template>

<script>
import JournalInfo from '@views/supplier-manage/effect/components/JournalInfo.vue';
import SiteInspection from '@views/supplier-manage/admittance/components/SiteInspection.vue';
import SampleCertification from '@views/supplier-manage/admittance/components/SampleCertification.vue';

export default {
  name: 'AdmittanceInfo',
  components: {
    JournalInfo,
    SiteInspection,
    SampleCertification
  },
  data() {
    return {
      isEdit: false,
      surveyTime: [],
      surveyTimeStart: '',
      surveyTimeEnd: '',
      surveyPerson: '',
      surveyPersonOption: [
        { label: '张三', value: '1' },
        { label: '李四', value: '2' },
        { label: '王五', value: '3' }
      ],
      columns: [
        // { title: '序号', width: 50, customRender: (text, record, index) => `${index + 1}`, align: 'center' },
        { title: '序号', width: 50, scopedSlots: { customRender: 'index' }, align: 'center' },
        { title: '调查项', dataIndex: 'surveyItem', width: 150, ellipsis: true },
        { title: '权重', dataIndex: 'weight', width: 100, ellipsis: true },
        { title: '评分', dataIndex: 'score', width: 150, scopedSlots: { customRender: 'score' }, ellipsis: true },
        { title: '评分说明', dataIndex: 'scoreInstruction', scopedSlots: { customRender: 'scoreInstruction' }, ellipsis: true },
      ],
      dataSource: [
        { surveyItem: '管理能力', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '地理位置', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '基本产能测试', weight: '25%', score: 0, scoreInstruction: '' },
        { surveyItem: '管理能力', weight: '25%', score: 0, scoreInstruction: '' }
      ],
      fileList: [
        {
          uid: '-1',
          name: '河南盛世机械供应商调查表-V1.0 2024-06-01.xlcx',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png',
        }
      ],
    };
  },
  computed: {
    totalData() {
      let score = 0;
      this.dataSource.forEach(item => {
        score += item.score;
      })
      return [{ surveyItem: '', weight: '', score, scoreInstruction: '' }]
    }
  },
  mounted() {
  },
  methods: {
    onEdit() {
      this.isEdit = true;
    },
    onConfirm() {
      this.isEdit = false;
    },
    onCancel() {
      this.isEdit = false;
    },
    // 范围日期处理
    setTimeRange(startTimeName, endTimeName, timeRange, timeStringRange) {
      if (timeStringRange.length > 0) {
        const [one, two] = timeStringRange;
        this[startTimeName] = one + ' ' + '00:00:00';
        this[endTimeName] = two + ' ' + '23:59:59';
      } else {
        this[startTimeName] = '';
        this[endTimeName] = '';
      }
    },
    surveyPersonChange() {

    },
    handleChange(info) {
      let fileList = [...info.fileList];
      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2);

      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    }
  }
}
</script>

<style lang="less" scoped>
.header-box {
  position: relative;
  z-index: 2;

  height: 40px;
  line-height: 40px;
  border-radius: 8px 8px 0px 0px;
  color: rgba(16, 16, 16, 1);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);

  padding: 0 24px;

  .header-btn {
    cursor: pointer;
    .text {
      margin-left: 5px;
    }
  }
}

.btn-box {
  background-color: rgba(245, 246, 248, 1);
  padding: 10px 24px 2px;
}

.content-box {
  position: relative;
  z-index: 1;
  // margin-top: 10px;
}
</style>